<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properities -->
  <title>Bootstrap - Semantic</title>
  <link rel="stylesheet" type="text/css" href="dist/semantic.css">

  <script src="assets/library/jquery.min.js"></script>
  <script src="dist/semantic.js"></script>
  <style>
	  .spaced > .button {
	    margin-bottom: 1em;
	  }
	  .ui.grid.main {
	  	margin: 0;
	  }
  </style>
</head>
<body>

<div class="ui grid main">
  <div class="row">
  	<div class="column">
	  	<div class="ui top attached tabular tiny menu">
		  <a class="item active">
		    Bio
		  </a>
		  <a class="item">
		    Photos
		  </a>
		  <div class="right menu">
		    <div class="item">
		      <div class="ui transparent icon input">
		        <input placeholder="Search users..." type="text">
		        <i class="search link icon"></i>
		      </div>
		    </div>
		  </div>
		</div>
		<div class="ui bottom attached segment">
		    <div id="controls" class="spaced">
		      <button class="ui basic button" onclick="groovy.addme($(this).text())">HTMLDiv</button>
		      <button class="ui basic button" onclick="groovy.addme($(this).text())">HTMLEdit</button>
		      <button class="ui basic button" onclick="groovy.addme($(this).text())">HTMLButton</button>
		    </div>
		</div>
	</div>
  </div>

</div>

<script type="text/javascript" src="javapp.js"></script>
<script type="text/javascript">
	var groovy = java.groovy('Top.groovy');
</script>

</body>

</html>
